<template>
  <div class="login">
    <el-form class="form" :model="model" :rules="rules" ref="loginForm">
      <div
        style="
          margin-bottom: 50px;
          color: #fff;
          text-align: center;
          font-size: 34px;
          font-weight: bold;
        "
      >
        <!-- <img src="../../assets/imgs/logo.png" alt="" /> -->
        后台管理系统
      </div>
      <el-form-item prop="adminName">
        <el-input
          class="text"
          v-model="model.adminName"
          prefix-icon="User"
          clearable
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          class="text"
          v-model="model.password"
          prefix-icon="Lock"
          show-password
          clearable
          :placeholder="请输入用户密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          class="btn"
          size="large"
          @click="submit"
        >
          {{ btnText }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  computed,
  watch,
} from "vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  name: "login",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const getRules = () => ({
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 12,
          message: "密码长度为6到12位",
          trigger: "blur",
        },
      ],
    });
    const state = reactive({
      model: {
        adminName: "admin",
        password: "123123",
      },
      rules: getRules(),
      loading: false,
      btnText: computed(() => (state.loading ? "登录中..." : "登录")),
      loginForm: ref(null),
      submit: () => {
        router.push("/home");
        return;
        if (state.loading) {
          return;
        }
        state.loginForm.validate(async (valid) => {
          if (valid) {
            state.loading = true;
            const res = await login(state.model);
            if (res.code == 1000001) {
              localStorage.setItem("satoken", res.data.satoken);
              router.push("/rolecate");
            }
          }
        });
      },
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  transition: transform 1s;
  transform: scale(1);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2d3a4b;
  .form {
    width: 520px;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 160px auto 0;
    :deep {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        background: rgba(0, 0, 0, 0.1);
      }
      .el-input-group--append > .el-input__wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .el-input-group--prepend > .el-input__wrapper {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .title {
      color: #fff;
      text-align: center;
      font-size: 24px;
      margin: 0 0 24px;
    }
    .text {
      font-size: 16px;
      :deep(.el-input__inner) {
        color: #fff;
        height: 48px;
        line-height: 48px;
        &::placeholder {
          color: rgba(255, 255, 255, 0.2);
        }
      }
    }
    .btn {
      width: 100%;
    }
  }
}
</style>
